@import "common/config";
@import "common/module";

.reset();
//invitation_to_register_spire-com
.invitation_to_register_spire-com() {
  display: inline-block;
  vertical-align: middle;
  background: url(../images/invitation-to-register/invitation_to_register_spire.png) no-repeat;
  background-size: 4rem 3rem;
}

.invitation-to-register-body {
  background-color: #FFF7ED;
}

//invitation-to-register-fix
.invitation-to-register-fix {
  position: fixed;
  top: 0;
  width: 100%;
  height: 1.2rem;
  line-height: 1.2rem;
  left: 0;
  background-color: #fff;
  padding: 0 .24rem;
  z-index: 999999999;
  .logo {
    float: left;
    a {
      display: inline-block;
      width: 2.01rem;
      height: .61rem;
      background-position: 0 0;
      text-indent: -99999px;
      .invitation_to_register_spire-com();
    }
    span {
      display: inline-block;
      color: @MAIN_COLOR;
      font-size: .26rem;
      margin-top: .1rem;
      vertical-align: middle;
    }
  }
  .down-app {
    float: right;
    .down-app {
      display: inline-block;
      border-radius: 36px;
      background-color: #34a56f;
      line-height: .36rem;
      margin-top: .4rem;
      color: #ffffff;
      padding: .1rem .24rem;
    }
  }
}

//invitation-to-register
.invitation-to-register {
  margin-top: 1.2rem;
  //background: url(../images/invitation-to-register/invitation_to_register.png) no-repeat;
  //background-size: cover;
  //register-hd
  .register-hd {
    background-image: url(../images/invitation-to-register/invitation_to_register_bg.jpg);
    background-size: cover;
    min-height: 9.08rem;
    .register-get {
      padding-top: 72%;
      margin: 0 auto;
      width: 80%;
      .register-get-cont {
        p input, .user-get-btn {
          border-radius: 36px;
          border: 0;
          height: .8rem;
          line-height: .8rem;
          padding: 0 .4rem;
          font-size: .36rem;
          outline: none;
          width: 100%;
          text-align: center;
          color: @TEXT_ASSIST_COLOR;
        }
        .user-tel {
          padding-bottom: .24rem;
          .user-input {
            width: 100%;
          }
        }
        .user-code {
          //overflow: hidden;
          .clearfix();
          .user-code-l {
            float: left;
            padding-right: .28rem;
            width: 58%;
          }
          .user-code-r {
            float: right;
            width: 42%;
            .get-tel-code {
              text-align: center;
              width: 100%;
              color: #fff;
              background-color: #C01102;
              box-shadow: 1px 3px 0px #B11002;
            }
            .get-tel-code-disable {
              background-color: #DEDEDE;
              box-shadow: 1px 3px 0px #B1B1B1;
              color: #9C9C9C;
            }
          }
        }
        .user-get-op {
          margin-top: .3rem;
          text-align: center;
          .user-get-btn {
            display: inline-block;
            width: 100%;
            color: #ffffff;
            background-color: #C01102;
            box-shadow: 2px 4px 0px #B11002;
          }
        }

      }
    }
  }

  //register-bd
  .register-bd {

    //register-bd-mod
    .register-bd-mod {
      margin-top: .3rem;
      .mod-tit {
        text-align: center;
        padding: 0 .28rem;
        margin-top: .72rem;
        .tit-decorate {
          height: 1px;
          background-color: #FF3F4C;
          margin: 0 auto;
        }
        .tit-txt {
          margin: -22px auto 0;
          width: 216px;
          .tit-txt-inner {
            position: relative;
            font-size: 34px;
            padding: 0 44px;
            display: inline-block;
            background-color: #FFF7ED;
            &:before {
              position: absolute;
              left: 0;
              top: 18px;
              content: '';
              width: 45px;
              height: 4px;
              background-color: #FF3F4C;
            }
            &:after {
              position: absolute;
              right: 0;
              top: 18px;
              content: '';
              width: 45px;
              height: 4px;
              background-color: #FF3F4C;
            }
            span {
              color: #ffffff;
              background-color: #FF3F4C;
              display: inline-block;
              font-size: .3rem;
              border-radius: 36px;
              padding: 0.14rem .34rem;
              vertical-align: middle;
            }
          }
        }
      }
      .mod-cont {

      }
    }

    //adopt-porket
    .adopt-porket {
      .mod-cont {
        overflow: hidden;
        .mod-cont-item {
          padding: .4rem .24rem;
          border-top: 1px solid #eaeaea;
          margin-top: -1px;
          //item-hd
          .item-hd {
            color: #0e0e0e;
            font-size: .32rem;
            span {
              display: inline-block;
              color: #ef7042;
              border: 1px solid #EF7042;
              padding: .06rem;
              margin-left: .12rem;
            }
          }
          //item-bd
          .item-bd {
            overflow: hidden;
            color: #9c9c9c;
            margin-top: .5rem;
            .fl {
              float: left;
              width: 33.33%;
              text-align: center;
            }
            .item-l {
              text-align: left;
              .percentage {
                color: #eb3809;
                font-size: .42rem;
                margin-bottom: .04rem;
              }
              p {
                font-size: .22rem;
                margin-top: .2rem;
              }
            }
            .item-c {
              span {
                font-size: .44rem;
                color: #000000;
              }
              p {
                font-size: .22rem;
                margin-top: .18rem;
              }
            }
            .item-r {
              text-align: right;
              .circle {
                float: right;
                width: 46px;
                height: 46px;
                position: relative;
                border-radius: 50%;
                background: #ED4A17;
                margin-top: .1rem;
              }
              .pie_left, .pie_right {
                width: 46px;
                height: 46px;
                position: absolute;
                top: 0;
                left: 0;
              }
              .left, .right {
                width: 46px;
                height: 46px;
                background: #D0D0D0;
                border-radius: 50%;
                position: absolute;
                top: 0;
                left: 0;
              }
              .pie_right, .right {
                clip: rect(0, auto, auto, 23px);
              }
              .pie_left, .left {
                clip: rect(0, 23px, auto, 0);
              }
              .mask {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                left: 2px;
                top: 2px;
                background: #fffcf8;
                position: absolute;
                text-align: center;
                line-height: 42px;
                font-size: 14px;
                font-weight: bold;
                color: #ED4A17;
              }
              .sell-out {
                background: #D0D0D0;
                .mask {
                  span {
                    display: none;
                  }
                  i {
                    color: #d0d0d0;
                    font-style: normal;
                  }
                }
              }
            }
          }

        }
      }
    }

    //the-pig-bag
    .the-pig-bag {
      .mod-cont {
        padding: .4rem 0;
        overflow: hidden;
        .mod-cont-l {
          float: left;
          color: #FF3F4C;
          border-right: 1px solid #eaeaea;
          padding: .4rem .4rem .4rem .74rem;
          .raise {
            font-size: .26rem;
            .num {
              font-size: .62rem;
              i {
                font-size: .52rem;
                font-style: normal;
              }
            }
            .raise-icon {
              .invitation_to_register_spire-com();
              width: .4rem;
              height: .46rem;
              background-position: -3.5rem 0;
              margin-bottom: 4px;
              margin-left: 4px;
              margin-right: 1px;
              vertical-align: bottom;
            }
          }
          .raise-txt {
            span {
              display: inline-block;
              border: 1px solid #FF3F4C;
              font-size: .22rem;
              border-radius: 36px;
              padding: 3px .26rem;
              margin-top: 5px;
            }
          }
        }
        .mod-cont-r {
          float: left;
          p {
            line-height: .56rem;
            font-size: .36rem;
            color: #646464;
            padding-left: .4rem;
            span {
              .invitation_to_register_spire-com();
              margin-right: .2rem;
            }
            .interest-accrual-icon {
              width: .36rem;
              height: .40rem;
              background-position: -2.16rem 0;
            }
            .redelivery-icon {
              width: .38rem;
              height: .36rem;
              background-position: -2.6rem 0;
            }
            .any-time-get-icon {
              width: .38rem;
              height: .36rem;
              background-position: -3.06rem 0;
            }
          }
        }
      }
    }
    //security-assurance
    .security-assurance {
      .mod-cont {
        padding-top: .6rem;
        .mod-cont-item {
          overflow: hidden;
          margin-bottom: .6rem;
          .item-l {
            float: left;
            width: 1rem;
            height: 1rem;
            margin-right: .24rem;
            margin-left: .3rem;
            .invitation_to_register_spire-com();
          }
          .item-r {
            color: #666664;
            .item-r-tit {
              color: #000000;
              font-size: .32rem;
              padding-bottom: .03rem;
            }
            .item-r-cont {
              line-height: .36rem;
              font-size: .24rem;
            }
          }
        }
        .lucency {
          .item-l {
            background-position: 0 -.81rem;
          }
        }
        .safe {
          .item-l {
            background-position: -1.16rem -.82rem;
          }
        }
        .reliable {
          .item-l {
            background-position: -2.32rem -.81rem;
          }
        }

      }
    }

    //page-bottom
    .page-bottom {
      text-align: center;
      color: #999490;
      padding-bottom: .2rem;
      font-size: .28rem;
    }
  }
}

